<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    全选： <input type="checkbox" name="" id="allcheck">
    <br>
    <br>
    选项1：<input type="checkbox" name="" class="check1">
    <br>
    选项2：<input type="checkbox" name="" class="check1">
    <br>
    选项3：<input type="checkbox" name="" class="check1">

    <script>
        var all = document.querySelector("#allcheck");
        var check = [...document.querySelectorAll(".check1")];

        // 全选
        all.onclick = function () {
            check.forEach(function (item) {
                item.checked = all.checked;
            })
        }

        // 反选

        // check.forEach(function (item) {

        //     item.onclick = function () {
        //         var count = 0;
        //         check.forEach(function (item2) {
        //             if (item2.checked) {
        //                 count++;
        //             }
        //         })

        //         all.checked = (count === check.length);
        //     }
        // })

        check.forEach(function (item) {
            item.onclick = function () {
                var flag = true;
                check.forEach(function (item2) {
                    if (!item2.checked) {
                        flag = false;
                    }
                })

                all.checked = flag;
            }
        })

        // check.forEach(function (item) {
        //     item.onclick = function () {
        //         for (var n = 0; n < check.length; n++) {
        //             if (!check[n].checked) {
        //                 break;
        //             }
        //         }

        //         all.checked = (n === check.length);
        //     }
        // })


    </script>
</body>

</html>